﻿<div class="demo-description">
    <h2><DemoNavLink Link="ContextMenu#DataBinding" />Bind to Hierarchical Data</h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxContextMenu">Context Menu</a> can be bound to hierarchical data structures. Specify the following properties to bind the component to a hierarchical data structure:
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxContextMenu.Data">Data</a> - A Context Menu data source object.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxContextMenu.ChildrenExpression">ChildrenExpression</a> - A lambda expression that returns the data item’s children.</li>
    </ul>
    <p>The following properties specify expressions that return menu item information (text, name, and etc.):</p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxContextMenu.NameExpression">NameExpression</a> - A lambda expression that returns a menu item’s unique identifier (name).</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxContextMenu.ClickExpression">ClickExpression</a> - A lambda expression that returns a handler for a menu item’s Click event.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxContextMenu.TextExpression">TextExpression</a> - A lambda expression that returns a menu item’s text.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxContextMenu.IconUrlExpression">IconUrlExpression</a> - A lambda expression that returns the URL of a menu item icon.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxContextMenu.BeginGroupExpression">BeginGroupExpression</a> - A lambda expression that specifies the start of an item group.</li>
    </ul>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar ShowSizeSelector="false" Title="Use the context menu to format the text below"/>
    </div>
    <div class="card-body p-0" style="font-size: 12pt;">
        <div style="@Formatting.GetStyleString() height: 300px; overflow-y: auto; padding: 0.75rem 1rem; display: flex;" class="dxbs-preventsel" @oncontextmenu="((e) => { ContextMenu.Show(e); } )" @oncontextmenu:preventDefault>
            <span style="display: inline-block; text-align: center; margin: auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.</span>
        </div>
        <DxContextMenu Data="@MenuItems"
                       ItemClick="((args) => { InvokeAsync(StateHasChanged); })"
                       TextExpression="(item => (item as TextFormattingMenuItem).Text)"
                       ClickExpression="(item => (item as TextFormattingMenuItem).Click)"
                       ChildrenExpression="(item => (item as TextFormattingMenuItem).Children)"
                       BeginGroupExpression="(item => (item as TextFormattingMenuItem).BeginGroup)"
                       IconUrlExpression="(item => (item as TextFormattingMenuItem).IconUrl)"
                       @ref="@ContextMenu">
        </DxContextMenu>
    </div>
</div>

<CodeSnippet_ContextMenu_DataBinding />


@code {
    List<TextFormattingMenuItem> menuItems;

    DxContextMenu ContextMenu { get; set; }
    TextFormatting Formatting { get; set; } = new TextFormatting();
    List<TextFormattingMenuItem> MenuItems {
        get {
            if (menuItems == null) {
                menuItems = new List<TextFormattingMenuItem>() {
                    new TextFormattingParentMenuItem(Formatting, "Font", new List<TextFormattingMenuItem>() {
                        new FontFamilyMenuItem(Formatting, "Times New Roman", "Times New Roman"),
                        new FontFamilyMenuItem(Formatting, "Tahoma", "Tahoma"),
                        new FontFamilyMenuItem(Formatting, "Verdana", "Verdana"),
                        new FontFamilyMenuItem(Formatting, "Arial", "Arial"),
                        new FontFamilyMenuItem(Formatting, "MS Sans Serif", "MS Sans Serif"),
                        new FontFamilyMenuItem(Formatting, "Courier", "Courier"),
                        new FontFamilyMenuItem(Formatting, "Segoe UI", "Segoe UI"),
                        new FontFamilyMenuItem(Formatting, "Default", null) { BeginGroup = true }
                    }),
                    new TextFormattingParentMenuItem(Formatting, "Size", new List<TextFormattingMenuItem>() {
                        new FontSizeMenuItem(Formatting, "8pt", 8),
                        new FontSizeMenuItem(Formatting, "10pt", 10),
                        new FontSizeMenuItem(Formatting, "12pt", 12),
                        new FontSizeMenuItem(Formatting, "14pt", 14),
                        new FontSizeMenuItem(Formatting, "18pt", 18),
                        new FontSizeMenuItem(Formatting, "24pt", 24),
                        new FontSizeMenuItem(Formatting, "36pt", 36)
                    }),
                    new TextFormattingParentMenuItem(Formatting, "Style", new List<TextFormattingMenuItem>() {
                        new TextDecorationMenuItem(Formatting, "Bold", "Bold"),
                        new TextDecorationMenuItem(Formatting, "Italic", "Italic"),
                        new TextDecorationMenuItem(Formatting, "Underline", "Underline"),
                        new TextDecorationMenuItem(Formatting, "Overline", "Overline"),
                        new TextDecorationMenuItem(Formatting, "Strikethrough", "Strikethrough")
                    }),
                    new ClearFormattingMenuItem(Formatting) { BeginGroup = true }
                };
            }
            return menuItems;
        }
    }
}
